<template>
  <div class="friends_list">
    <div class="head">
      <nut-navbar class="navbar" z-index="5" :clickable="false" fixed safe-area-inset-top>
        <template #content>
          <span>{{ $t('friend_list') }}({{ list.length }})</span>
        </template>
        <template #left>
          <iconpark-icon @click="router.go(-1)" class="close" icon-id="tongyicontyfanh" size="2.4rem"></iconpark-icon>
        </template>
        <template #right>
        </template>
      </nut-navbar>
    </div>
    <div class="section">
      <div class="query">
        <nut-input v-model="queryName" :placeholder="t('search_friends')">
          <template #left>
            <iconpark-icon icon-id="majesticonssearch-line" size="1.2rem" class="refresh"></iconpark-icon>
          </template>
        </nut-input>
      </div>
      <div class="list">
        <nut-elevator :index-list="list">
          <template #default="{ item }">
            <div class="list_item" @click="selectUser(item, (deepObj['' + item.deep] || item.iskf ==
              1 ? $t('official_customer_service') : $t('direct_player')))">
              <ImgT class="item_img" :src="`/imgs/head_icons/${item.THeadPhoto ? item.THeadPhoto : 'default'}.webp`"
                alt="" />
              <div class="right_item">
                <div class="item_name">{{ item.TUsername }}</div>
                <div class="friend_type" :class="['type' + item.deep, item.iskf ==
                  1 ? 'type0' : '']">{{ deepObj['' + item.deep] || (item.iskf == 1 ? $t('official_customer_service') :
                    $t('direct_player')) }}</div>
              </div>
            </div>
          </template>
        </nut-elevator>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, computed } from 'vue';
import { useRouter } from "vue-router";
const router = useRouter();
import { sortAndGroupByLetter } from '@/utils/publicMethods'
import { useI18n } from "vue-i18n";
const { t } = useI18n();


import { storeToRefs } from 'pinia';
import { Chat } from '@/store/chat';

const { chatitemList } = storeToRefs(Chat());


const deepObj: any = {
  '-1': t('superior_agent'),
  '1': t('inferior_agent'),
  '0': t('official_customer_service'),
}
const queryName = ref("")
const state = reactive({
  chatitemList,
})
const list = computed(() => {
  const { list } = sortAndGroupByLetter(state.chatitemList, 'TUsername')
  if (!queryName.value) return list
  let arr = <any>[]
  list.map((item: any) => {
    let itemlist = <any>[]
    item.list.map((it: any) => {
      if (it.TUsername && it.TUsername.indexOf(queryName.value) != -1) {
        itemlist.push(it)
      }
    })
    item.list = itemlist
    arr.push(item)
  })
  return arr
})
// 搜索
// const search = () => {
// }

// 电梯列表
// const clickItem = (key: string, item: any) => {
//   console.log(key, item)
// }
// const clickIndex = (key: string) => {
//   console.log(key)
// }
// 跳转
const selectUser = (item: any, type: any) => {
  router.push({
    path: '/chatRoom',
    query: {
      userInfo: JSON.stringify(item) || '',
      type,
    }
  })
}
onMounted(() => {
  console.log('list chatitemList', state.chatitemList)
  setTimeout(() => {
    console.log('setTimeout list', list)
  }, 3000)
})
</script>

<style lang="scss" scoped>
.head {
  position: fixed;
  width: 100%;
  height: 55px;
  background-color: #361e79;
  z-index: 1;
}

.section {
  padding: 0 10px 0;
  color: #8e82c2;
  margin-top: 65px;

  .query {

    &:deep(.nut-input) {
      height: 36px;
      padding: 8px;
      border-radius: 8px;
      box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
      border: solid 1px #322c59;
      background: radial-gradient(circle at 50% 11%, #361e79, #202137 97%) !important;

      input {
        &::placeholder {
          color: #8d84c5;
        }
      }
    }
  }

  .list {
    .list_item {
      color: #fff;
      display: flex;
      align-items: center;
      width: 100%;
      height: 50px;

      .item_img {
        height: 40px;
        margin-right: 10px;
      }

      .right_item {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #201844;

        .item_name {
          margin-right: 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          max-width: 100px;
        }

        .friend_type {
          font-size: 12px;
          line-height: 12px;
          max-width: 170px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          border-radius: 20px;
          padding: 3px 4px;
          border-image-slice: 1;
          border-image-source: linear-gradient(to bottom, #6bcdff 0%, #5e99ff 103%);
          background-image: linear-gradient(88deg, #12b8ff 0%, #1266ff 99%), linear-gradient(to bottom, #6bcdff 0%, #5e99ff 103%);

          &.type-1 {
            border-image-source: linear-gradient(to bottom, #ffc38e 0%, #ff7b4c 103%);
            background-image: linear-gradient(88deg, #f92 0%, #da4212 99%), linear-gradient(to bottom, #ffc38e 0%, #ff7b4c 103%);
          }

          &.type2 {
            border-image-source: linear-gradient(to bottom, #6bcdff 0%, #5e99ff 103%);
            background-image: linear-gradient(88deg, #12b8ff 0%, #1266ff 99%), linear-gradient(to bottom, #6bcdff 0%, #5e99ff 103%);
          }

          &.type3 {
            // border-image-source: linear-gradient(to bottom, #ff8dbf 0%, #ff6783 103%);
            // background-image: linear-gradient(88deg, #ff52a5 0%, #ff264d 99%), linear-gradient(to bottom, #ff8dbf 0%, #ff6783 103%);
            background-image: linear-gradient(88deg, #12b8ff 0%, #1266ff 99%), linear-gradient(to bottom, #6bcdff 0%, #5e99ff 103%);

          }

          &.type4 {
            border-image-source: linear-gradient(to bottom, #fff 0%, #8cacff 103%);
            background-image: linear-gradient(to right, #4c36b3 0%, #3c279a 100%), linear-gradient(to bottom, #fff 0%, #8cacff 103%);
          }
        }
      }

    }
  }

}

:deep(.nut-elevator) {
  .nut-elevator__list {
    height: calc(100vh - 120px) !important;

    .nut-elevator__list__item__name {
      height: 50px;
    }

    .nut-elevator__list__item__code::after {
      background: none;
    }
  }

  .nut-elevator__bars {
    .nut-elevator__bars__inner {
      font-size: 14px;
    }
  }

}

:deep() {
  .nut-navbar {

    .nut-navbar__left,
    .right-handler {
      color: #fff;
    }
  }
}
</style>